import React, { Component } from "react";
import Detail from "./Detail";
import {Link,Route} from 'react-router-dom'
export default class Message extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messageArr: [
        { id: "01", title: "消息1" },
        { id: "02", title: "消息2" },
        { id: "03", title: "消息3" },
      ],
    };
  }
  replaceShow = (id,title)=>{
    // replace跳转+携带params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)
    // replace跳转+携带search参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
    // replace跳转+携带state参数
    this.props.history.replace('/home/message/detail',{id,title})

  }
  pushShow = (id,title)=>{
    // replace跳转+携带params参数

    // this.props.history.push(`/home/message/detail/${id}/${title}`)
    // replace跳转+携带search参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
    // replace跳转+携带state参数
    this.props.history.push('/home/message/detail',{id,title})

  }
  back=()=>{
    this.props.history.goBack()
  }
  forward=()=>{
    this.props.history.goForward()

  }
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* params传参 */}
                {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}
                {/* search传参 */}
                {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
                {/* state传参 */}
                <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                <button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
                <button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>

              </li>
            );
          })}
        </ul>
        <hr/>
       {/* 声明接收params参数 */}
        {/* <Route path='/home/message/detail/:id/:title' component={Detail}/> */}
       {/* 无需声明接收search参数,正常注册路由即可 */}
        <Route path='/home/message/detail' component={Detail}/>
       {/* 无需声明接收state参数,正常注册路由即可 */}
       {/* <Route path='/home/message/detail' component={Detail}/> */}
        <button onClick={this.back}>退回</button>
        <button onClick={this.forward}>前进</button>

      </div>
    );
  }
}
